<template>
    <!-- 地图 -->
    <div class="chinaEcharts">
        <div id="mapChart" ref="mapChart" >
        </div>
        
    <!-- 饼图 -->
        <div id="pieChart" ref="pieChart">
        </div>
            <el-switch
            class="change"
            v-model="changeType"
            active-text="危机物品"
            inactive-text="夜不归宿"
            @change="changeTypEchart()">
            </el-switch>
    <!-- 柱状图 -->
    <div id="zhuChart" ref="zhuChart">
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
export default {
    name: "ChinaEcharts",
    data(){
        return{
            data:'',
            changeType:true
        }
    },
     mounted() {
        this.mapMapFn();
        this.mapPieFn(1);
        this.zhuMapFn() 
    },
    methods: {
        mapMapFn() {
            // 基于准备好的dom，初始化echarts实例
            // var mapChart = this.$echarts.init(this.$refs.mapChart);
            var option;
            var mapChart = this.$echarts.init(
                document.getElementById("mapChart")
            );
            option={
                backgroundColor: "", //背景颜色
                title: {
                    text: "",
                    subtext: "",
                    color: "#fff",
                    x: "center",
                },
                //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
                visualMap: {
                    // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
                    type: "piecewise", // 类型为分段型
                    top: "bottom",
                    // calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
                    right: 10,
                    splitNumber: 6,
                    seriesIndex: [0],
                    itemWidth: 20, // 每个图元的宽度
                    itemGap: 2, // 每两个图元之间的间隔距离，单位为px
                    pieces: [
                        // 自定义每一段的范围，以及每一段的文字
                        { gte: 10000, label: "10000人以上", color: "#1890FF" }, // 不指定 max，表示 max 为无限大（Infinity）。
                        {
                            gte: 1000,
                            lte: 9999,
                            label: "1000-9999人",
                            color: "#83C2FF",
                        },
                        {
                            gte: 500,
                            lte: 999,
                            label: "500-999人",
                            color: "#CDE5FF",
                        },
                        {
                            gte: 100,
                            lte: 499,
                            label: "100-499人",
                            color: "#E6F1FF",
                        },
                        {
                            gte: 1,
                            lte: 99,
                            label: "1-99人",
                            color: "#EBF3FF",
                        },
                        { lte: 0, label: "无", color: "#FAFAFA" }, // 不指定 min，表示 min 为无限大（-Infinity）。
                    ],
                    textStyle: {
                        color: "#737373",
                    },
                },
                // 提示框，鼠标移入
                tooltip: {
                    show: true, //鼠标移入是否触发数据
                    trigger: "item", //出发方式
                    formatter: "{b}-用户数量：{c}",
                },
                //配置地图的数据，并且显示
                series: [
                    {
                        name: "地图",
                        type: "map", //地图种类
                        map: "china", //地图类型。
                        data: [],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //默认是否显示省份名称
                                },
                                areaStyle: {
                                    color: "#FAFAFA", //默认的地图板块颜色
                                },
                                borderWidth: 1,
                                borderColor: "#D9D9D9",
                            },
                            //地图区域的多边形 图形样式。
                            emphasis: {
                                label: {
                                    show: true, //选中状态是否显示省份名称
                                },
                                areaStyle: {
                                    color: "#90c31d", //选中状态的地图板块颜色
                                },
                            },
                        },
                        zoom: 1, //放大比例
                        label: {
                            //图形上的文本标签，可用于说明图形的一些数据信息
                            show: true,
                        },
                    },
                    {
                        type: "scatter",
                        showEffectOn: "render", //配置什么时候显示特效
                        coordinateSystem: "geo", //该系列使用的坐标系
                        symbolSize: 10, //标记的大小
                        data: [],
                        zlevel: 99999,
                    },
                ],
            }
            option && mapChart.setOption(option)
            window.addEventListener("resize", () => {
                // 自动渲染echarts
                mapChart.resize();
            }); 
            request({
                url: "/api/dataSummary/dataSummaryP",
                method: "get",
            }).then(res => {
                option.series[0].data= res.data;
                mapChart.setOption(option);
            })
        },
        mapPieFn(type) {
            

            // 基于准备好的dom，初ie始化echarts实例
            // var mapChart = this.$echarts.init(this.$refs.mapChart);
            var pieOption;
            var pieChart = this.$echarts.init(
                document.getElementById("pieChart")
            );
            pieOption={
                title: {
                    text: '违纪物品统计',
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: 'rgb(205,229,225)'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: []
                },
                series: [
                    {
                        name: '违纪物品统计',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
            pieOption && pieChart.setOption(pieOption)
            if (type==0){
                window.addEventListener("resize", () => {
                // 自动渲染echarts
                mapChart.resize();
                }); 
                request({
                    url: "/api/dataSummary/vioPie",
                    method: "get",
                }).then(res => {
                    pieOption.series[0].data= res.data;
                    pieOption.legend.data =  res.data.name
                    pieChart.setOption(pieOption);
                })
            }else{
                window.addEventListener("resize", () => {
                // 自动渲染echarts
                zhuChart.resize();
                }); 
                request({
                    url: "/api/dataSummary/nightPie",
                    method: "get",
                }).then(res => {
                     pieOption.title.text = '夜不归宿统计';
                     pieOption.series[0].name = '夜不归宿统计';
                     pieOption.tooltip.formatter = '{a} <br/>{b}号楼: {c}人 ({d}%)'
                    pieOption.series[0].data= res.data;
                    pieOption.legend.data =  res.data.name
                    pieChart.setOption(pieOption);
                })
            }
            
        },
        changeTypEchart(){
        if (this.changeType ==true) {
             this.mapPieFn(0)
        }else(
             this.mapPieFn(1)
        )
    },
    // zhuoption
    zhuMapFn() {
            // 基于准备好的dom，初始化echarts实例
            // var mapChart = this.$echarts.init(this.$refs.mapChart);
            var zhuoption;
            var zhuChart = this.$echarts.init(
                document.getElementById("zhuChart")
            );
            zhuoption={
                title: {
                    text: '住宿情况',
                    // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data:[],
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            color: 'rgba(0,0,0,0.05)'
                        },
                        barGap: '-100%',
                        barCategoryGap: '40%',
                        data: [],
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            color:[
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                        },
                        emphasis: {
                            itemStyle: {
                                color:[
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                            }
                        },
                        data: []
                    }
                ]
            };

            zhuoption && zhuChart.setOption(zhuoption)
            window.addEventListener("resize", () => {
                // 自动渲染echarts
                zhuChart.resize();
            }); 
            request({
                url: "/api/dataSummary/zhu",
                method: "get",
            }).then(res => {
                 for (var i = 0; i < res.data.length; i++) {
                        zhuoption.series[1].data.push(res.data[i].studentNum)
                        zhuoption.xAxis.data.push(res.data[i].studentNum)
                    }
                var dataShadow = []
                    for (var i = 0; i < res.data.length; i++) {
                        dataShadow.push(Math.max(res.data.studentNum));
                    }
                zhuoption.series[0].data= dataShadow;
                zhuChart.setOption(zhuoption);
            })
        },
    },
    
};
</script>
<style lang="scss" scoped>
.chinaEcharts {
    width: 100%;
    height: 500px;
    background-color: #fff;
    box-shadow: 2x 2px 2px 1px rgba(0, 0, 0, 0.2);
}
#mapChart {
    width: 100%;
    height: 500px;
}
#pieChart {
    float: left;
    margin-top: 20px;
    width: 40%;
    height: 60%;
    background-color: #fff;
    box-shadow: 2x 2px 2px 1px rgba(0, 0, 0, 0.2);
}
#zhuChart{
     float: left;
    margin-top: 20px;
    margin-left: 8px;
    width: 40%;
    height: 60%;
    background-color: #fff;
    box-shadow: 2x 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.change{
    float: left;
    width: 19%;
}
.el-switch {
    position: relative;
    top: 20px;
}
</style>